<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" />

    <div class="container mt24">
      <el-card shadow="never" :body-style="{ padding: '5' }" class="mr24" style="flex-shrink: 0">
        <div style="width: 100%">
          <span style="font-weight: 600">选择版本</span>
          <Table :tableData="tableData" :tableHeader="tableHeader" :TableHeight="'280rem'" />
        </div>
      </el-card>

      <el-card style="width: 100%" shadow="never" :body-style="{ padding: '5' }">
        <el-card style="width: 100%" shadow="never" :body-style="{ padding: '5' }">
          <div>
            <span style="font-weight: 600" class="mr10">指令用量差异</span>
            <span class="f12"
              >注:部位名称标记黄色：材料 <span style="color: #ff7070">有差异</span>/用量差异标记黄色：材料<span style="color: #89ff15"
                >已订购</span
              ></span
            >
          </div>
          <Table :tableData="tableData2" :tableHeader="tableHeader2" :TableHeight="'170rem'" />
        </el-card>
        <el-card shadow="never" :body-style="{ padding: '0' }">
          <div>
            <span style="font-weight: 600">子材料用量差异</span>
            <Table :tableData="tableData3" :tableHeader="tableHeader3" :TableHeight="'80rem'" style="margin-right: 30px" />
          </div>
          <div class="btns">
            <el-button class="bg" type="primary" size="default" @click="">保存</el-button>
            <el-button type="primary" size="default" @click="">打印</el-button>
          </div>
        </el-card>
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'InstructionChangeL'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
const ChargeBackVal = ref('') // 退单说明
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入指令',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入配色',
    inputValue: ''
  },
  {
    type: 'select',
    selectValue: '变更原因',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '3',
        optionValue: '333333',
        optionLabel: 'option3'
      },
      {
        optionKey: '4',
        optionValue: '44444',
        optionLabel: 'option4'
      },
      {
        optionKey: '5',
        optionValue: 'option5',
        optionLabel: 'option5'
      },
      {
        optionKey: '6',
        optionValue: 'option6',
        optionLabel: 'option6'
      },
      {
        optionKey: '7',
        optionValue: 'option7',
        optionLabel: 'option7'
      },
      {
        optionKey: '8',
        optionValue: 'option8',
        optionLabel: 'option8'
      },
      {
        optionKey: '9',
        optionValue: 'option9',
        optionLabel: 'option9'
      },
      {
        optionKey: '10',
        optionValue: 'option10',
        optionLabel: 'option10'
      },
      {
        optionKey: '11',
        optionValue: 'option11',
        optionLabel: 'option11'
      },
      {
        optionKey: '12',
        optionValue: 'option12',
        optionLabel: 'option12'
      },
      {
        optionKey: '13',
        optionValue: 'option13',
        optionLabel: 'option13'
      },
      {
        optionKey: '14',
        optionValue: 'option14',
        optionLabel: 'option14'
      },
      {
        optionKey: '15',
        optionValue: 'option15',
        optionLabel: 'option15'
      },
      {
        optionKey: '16',
        optionValue: 'option16',
        optionLabel: 'option16'
      },
      {
        optionKey: '17',
        optionValue: 'option17',
        optionLabel: 'option17'
      },
      {
        optionKey: '18',
        optionValue: 'option18',
        optionLabel: 'option18'
      },
      {
        optionKey: '19',
        optionValue: 'option19',
        optionLabel: 'option19'
      }
    ]
  },
  {
    type: 'select',
    selectValue: '型体',
    selectOptions: [
      {
        optionKey: '1',
        optionValue: '111111',
        optionLabel: 'option1'
      },
      {
        optionKey: '2',
        optionValue: '222222',
        optionLabel: 'option2'
      },
      {
        optionKey: '3',
        optionValue: '333333',
        optionLabel: 'option3'
      },
      {
        optionKey: '4',
        optionValue: '44444',
        optionLabel: 'option4'
      },
      {
        optionKey: '5',
        optionValue: 'option5',
        optionLabel: 'option5'
      },
      {
        optionKey: '6',
        optionValue: 'option6',
        optionLabel: 'option6'
      },
      {
        optionKey: '7',
        optionValue: 'option7',
        optionLabel: 'option7'
      },
      {
        optionKey: '8',
        optionValue: 'option8',
        optionLabel: 'option8'
      },
      {
        optionKey: '9',
        optionValue: 'option9',
        optionLabel: 'option9'
      },
      {
        optionKey: '10',
        optionValue: 'option10',
        optionLabel: 'option10'
      },
      {
        optionKey: '11',
        optionValue: 'option11',
        optionLabel: 'option11'
      },
      {
        optionKey: '12',
        optionValue: 'option12',
        optionLabel: 'option12'
      },
      {
        optionKey: '13',
        optionValue: 'option13',
        optionLabel: 'option13'
      },
      {
        optionKey: '14',
        optionValue: 'option14',
        optionLabel: 'option14'
      },
      {
        optionKey: '15',
        optionValue: 'option15',
        optionLabel: 'option15'
      },
      {
        optionKey: '16',
        optionValue: 'option16',
        optionLabel: 'option16'
      },
      {
        optionKey: '17',
        optionValue: 'option17',
        optionLabel: 'option17'
      },
      {
        optionKey: '18',
        optionValue: 'option18',
        optionLabel: 'option18'
      },
      {
        optionKey: '19',
        optionValue: 'option19',
        optionLabel: 'option19'
      }
    ]
  },
  {
    type: 'date',
    dateLabel: '变更日期',
    dateValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '清空'
  },
  {
    type: 'button',
    checkboxLabel: '导出'
  }
])
const tableHeader = ref([
  {
    label: '指令号',
    prop: 'instructionNumber'
  },
  {
    label: '版本',
    prop: 'version'
  },
  {
    label: '变更时间',
    prop: 'changeTime'
  },
  {
    label: '变更原因',
    prop: 'changeReason'
  }
])
const tableData = ref([
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  },
  {
    instructionNumber: '123456',
    version: '1',
    changeTime: '2020-12-12',
    changeReason: '测试'
  }
])

const tableHeader2 = ref([
  {
    label: '版本',
    prop: 'version'
  },
  {
    label: '序号',
    prop: 'serialNumber'
  },
  {
    label: '部位',
    prop: 'position',
    bgColor: true
  },
  {
    label: '料号',
    prop: 'materialNumber'
  },
  {
    label: '材料颜色',
    prop: 'materialColor'
  },
  {
    label: '品名',
    prop: 'productName'
  },
  {
    label: '规格',
    prop: 'specification'
  },
  {
    label: '单位',
    prop: 'unit'
  },
  {
    label: '原用量',
    prop: 'originalDosage'
  },
  {
    label: '现用量',
    prop: 'currentDosage'
  },
  {
    label: '用量差异',
    prop: 'dosageDifference',
    bgColor: true
  },
  {
    label: '备注',
    prop: 'remark'
  }
])
const tableData2 = ref([
  {
    version: '指令1',
    serialNumber: '货号1',
    position: {
      value: '部位1',
      bgColor: 'white'
    },
    materialNumber: '物料号1',
    materialColor: '颜色1',
    productName: '品名1',
    specification: '规格1',
    unit: '单位1',
    originalDosage: '原用量1',
    currentDosage: '现用量1',
    dosageDifference: {
      bgColor: 'white',
      value: '用量差异1'
    },
    remark: '备注1'
  },
  {
    version: '指令2',
    serialNumber: '货号2',
    position: {
      value: '部位2',
      bgColor: 'white'
    },
    materialNumber: '物料号2',
    materialColor: '颜色2',
    productName: '品名2',
    specification: '规格2',
    unit: '单位2',
    originalDosage: '原用量2',
    currentDosage: '现用量2',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注2'
  },
  {
    version: '指令3',
    serialNumber: '货号3',
    position: {
      value: '部位3',
      bgColor: 'white'
    },
    materialNumber: '物料号3',
    materialColor: '颜色3',
    productName: '品名3',
    specification: '规格3',
    unit: '单位3',
    originalDosage: '原用量3',
    currentDosage: '现用量3',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注3'
  },
  {
    version: '指令4',
    serialNumber: '货号4',
    position: {
      value: '部位4',
      bgColor: 'white'
    },
    materialNumber: '物料号4',
    materialColor: '颜色4',
    productName: '品名4',
    specification: '规格4',
    unit: '单位4',
    originalDosage: '原用量4',
    currentDosage: '现用量4',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注4'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  },
  {
    version: '指令5',
    serialNumber: '货号5',
    position: {
      value: '部位5',
      bgColor: 'white'
    },
    materialNumber: '物料号5',
    materialColor: '颜色5',
    productName: '品名5',
    specification: '规格5',
    unit: '单位5',
    originalDosage: '原用量5',
    currentDosage: '现用量5',
    dosageDifference: {
      bgColor: 'white',
      value: '差异1111'
    },
    remark: '备注5'
  }
])

const tableHeader3 = ref([
  {
    label: '料号',
    prop: 'materialNumber'
  },
  {
    label: '材料名称',
    prop: 'materialName'
  },
  {
    label: '材料颜色',
    prop: 'materialColor'
  },
  {
    label: '规格',
    prop: 'specification'
  },
  {
    label: '单位',
    prop: 'unit'
  },
  {
    label: '比例',
    prop: 'proportion'
  },
  {
    label: '原用量',
    prop: 'originalDosage'
  },
  {
    label: '现用量',
    prop: 'currentDosage'
  },
  {
    label: '差异用量',
    prop: 'dosageDifference'
  }
])
const tableData3 = ref([
  {
    instruction: '指令1',
    number: '999'
  },
  {
    instruction: '指令2',
    number: '999'
  },
  {
    instruction: '指令3',
    number: '999'
  },
  {
    instruction: '指令1',
    number: '999'
  },
  {
    instruction: '指令2',
    number: '999'
  },
  {
    instruction: '指令3',
    number: '999'
  },
  {
    instruction: '指令1',
    number: '999'
  },
  {
    instruction: '指令2',
    number: '999'
  },
  {
    instruction: '指令3',
    number: '999'
  }
])
</script>

<style lang="less" scoped>
.container {
  display: flex;
}

.btns {
  float: right;
  margin-right: 11rem;
}
</style>
